<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox,ElButton } from 'element-plus'
import { useCache } from '@/hooks/web/useCache'
import { resetRouter } from '@/router'
import { useRouter } from 'vue-router'
import {ref,reactive} from "vue"
import { useDesign } from '@/hooks/web/useDesign'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useAppStore } from "@/store/modules/app";
import Dialog from '@/components/Dialog/src/Dialog.vue'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { required } from "@/utils/formRules";
import api from "@/api";
const dialogVisible=ref(false);
const {changePassword}=api;
const tagsViewStore = useTagsViewStore()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const { wsCache } = useCache()

const { replace } = useRouter()
const appStore=useAppStore();
const userInfo=wsCache.get(appStore.getUserInfo);
const schema = reactive<FormSchema[]>([
  {
    field:"oldPassword",
    label:"旧密码",        
    component: "InputPassword",    
    colProps: {
      span: 24,
    },
    componentProps: {
      style: {
        width: "100%",
      },
      placeholder: "请输入旧密码",
    },
  },{
    field:"newPassword",
    label:"新密码",        
    component: "InputPassword",    
    colProps: {
      span: 24,
    },
    componentProps: {
      style: {
        width: "100%",
      },
      placeholder: "请输入新密码",
    },
  },{
    field:"confimPassword",
    label:"确认密码",        
    component: "InputPassword",    
    colProps: {
      span: 24,
    },
    componentProps: {
      style: {
        width: "100%",
      },
      placeholder: "请确认密码",
    },
  },
]);
const { register, methods } = useForm();
const rules = {
  oldPassword: [required],
  newPassword: [required],
  confimPassword:[required,]
};
const loginOut = () => {
  ElMessageBox.confirm('是否退出本系统？','温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
        wsCache.clear();
        tagsViewStore.delAllViews()
        resetRouter() // 重置静态路由表
      // @ts-ignore
      if(window.__POWERED_BY_WUJIE__){
        // @ts-ignore
        window.$wujie.bus.$emit("login")
      }else {
          replace('/login')
        }
    })
    .catch(() => {})
}

const doChangePassword = async() => {
  const {getFormData}=methods;
  const data=await getFormData();
  await changePassword({id:appStore.getUser().id,oldPassword:data.oldPassword,newPassword:data.newPassword});
  dialogVisible.value=false;
}
</script>

<template>
  <ElDropdown :class="prefixCls" trigger="click">
    <div class="flex items-center cursor-pointer">
      <img
        src="@/assets/imgs/avatar.jpg"
        alt=""
        class="w-[calc(var(--tags-view-height)-10px)] rounded-[50%]"
      />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{userInfo.realName}}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem>
          <div @click="dialogVisible=true">修改密码</div>
        </ElDropdownItem>
        <ElDropdownItem divided>
          <div @click="loginOut">退出系统</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
  <Dialog  v-model="dialogVisible" title="修改密码"  max-height="180px" width="500px">
  <Form :rules="rules"  @register="register" :schema="schema"/>            
    <template #footer>
      <ElButton
        type="primary"        
        @click="doChangePassword"
      >
        提交
      </ElButton>
      <ElButton @click="dialogVisible = false">关闭</ElButton>
    </template>
  </Dialog>
</template>
